<template>
	<view class="device-filter" :class="searchVisible ? 'prevent' : ''">
		<search :visible.sync="searchVisible" :list="searchList" @search="search">
			<view>
				<slot name="popup"></slot>
			</view>
		</search>
		<view class="device-type-box">
			<view :class="['device-type',type == item.code ? 'active' : '']" v-for="item in typeList" @click="changeType(item)">{{item.name}}</view>
		</view>
		<view class="device-box">
			<view class="device-box-left">
				<view :class="[area == item.name ? 'active' : '']"  hover-class="clickable" v-for="item in areaList" @click="changeArea(item)">
					{{item.name}}
				</view>
			</view>
			<view class="device-box-right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	import _custom from '../../../common/_custom'
	import Search from '@/components/custom/search/search.vue'
	import { formatImg } from '@/common/custom_util.js'
	
	export default {
		components: {
			Search
		},
		data() {
			return {
				data: null,
				typeList: [
					{
						name: '用电设备',
						code: 'shebei',
					},
					{
						name: '仪表',
						code: 'yibiao',
					},
					{
						name: '阀门',
						code: 'famen',
					},
					{
						name: '其他',
						code: 'qita',
					},
				],
				areaList: [],
				deviceList: [],
				searchList: [],
				searchVisible: false,
				type: 'shebei',
				area: '',
			}
		},
		created() {
			this.getDeviceArea()
			this.$emit('changeType',this.type)
		},
		methods: {
			getDeviceArea() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDeviceArea',
					success(res) {
						that.areaList = res;
						that.area = that.areaList[0].name
						that.getDeviceList()
					}
				})
			},
			getDeviceList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDeviceList',
					apiparam: {
						buwei: this.area,
						device: this.type,
					},
					success(res) {
						res.forEach(item => {
							item.img = formatImg(item.savename)
							item.checked = false
						})
						that.$emit('getDeviceList',res)
					}
				})
			},
			changeType(v) {
				this.type = v.code
				this.getDeviceList()
				this.$emit('changeType',v.code)
			},
			changeArea(v) {
				this.area = v.name
				this.getDeviceList()
			},
			search(v) {
				let that = this;
				this.searchVisible = true;
				if(v) {
					_custom.getDataJava({
						apiname: 'getDeviceListByName',
						apiparam: {
							devicename: v,
						},
						success(res) {
							that.searchList = res
							that.$emit('getSearchList',res)
						}
					})
				} else {
					that.searchList = []
				}
			},
		}
	}
</script>

<style>
	.active {
		background-color: antiquewhite !important;
	}
	
	.device-filter {
		height: 100%;
	}
	
	.device-type-box {
		position: fixed;
		top: 100rpx;
		/* #ifdef H5 */
		top: 190rpx;
		/* #endif */
		left: 0;
		width: 100%;
		height: 100rpx;
		padding-top: 10rpx;
		z-index: 9;
		background-color: #eee;
		display: flex;
	}
	
	.device-type {
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		font-size: 25rpx;
		line-height: 60rpx;
		background-color: #fff;
		margin-right: 20rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	
	.area-item {
		height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		line-height: 100rpx;
	}
	
	.device-box {
		margin-top: 210rpx;
		display: flex;
		height: calc(100vh - 200rpx);
		overflow: hidden;
	}
	
	.device-box-left {
		width: 300rpx;
		height: 100%;
		overflow-y: scroll;
		background-color: #fff;
		border-right: 2rpx solid #eee;
		box-sizing: border-box;
	}
	
	.device-box-left > view {
		height: 100rpx;
		text-align: center;
		font-size: 27rpx;
		line-height: 100rpx;
	}
	
	.device-box-right {
		width: calc(100% - 300rpx);
		height: 100%;
		overflow-y: scroll;
	}
</style>
